<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery 实现左侧菜单</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .cont{
            height: 800px;
            width: auto;
            /*background-color: darkgrey;*/
            /*opacity: 0.5;*/
        }
        .left{
            float: left;
            width: 10%;
            height:100%;
            background-color: #396bb3;
        }
        .content{
            margin-left: 5px;
            margin-top: 20px;
        }
        .right{
            float: right;
            width: 70%;
            height: auto;
            background-color: darkgrey;
            opacity:1;
        }
        .item{
            margin-top: 20px;
        }
        .title{

            height: 30px;
            width: auto;
            background-color: #10fcff;
            line-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>

<body>
<div class="cont">
    <div class="left">
        <div class="content">
            <div class="item">
                <div class="title" onclick="show(this)">标题一</div>
                <div class="con">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题二</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题三</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题四</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题五</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题六</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题七</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题八</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">标题九</div>
                <div class="con hide">
                    <div>11111</div>
                    <div>22222</div>
                    <div>33333</div>
                    <div>44444</div>
                    <div>55555</div>
                    <div>66666</div>
                </div>
            </div>


        </div>
    </div>
    <div class="right"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    function show(self) {
        $(self).next().removeClass("hide");
        $(self).parent().siblings().children('.con').addClass('hide');
    }
</script>

</body>
</html>